<template>
    <Header :user="user"/>
    <!--购物车-->
    <div class="shop_cart_big_div">
        <div>
            <el-table :data="shopCart" border style="width: 100%;" stripe>
                <el-table-column fixed="left" label="选中它结账去" width="120">
                    <template #default="scope">
                        <input type="checkbox" v-model="ids" :value="scope.row.commodityId"/>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" sortable="true"/>
                <el-table-column prop="name" label="商品"/>
                <el-table-column prop="created" label="添加购物车时间" width="200px"/>
                <el-table-column prop="price" label="单价"/>
                <el-table-column prop="num" label="数量" width="140px" align="center">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.num" @change="updateShopCartNum(scope.row)" :min="1"
                                         :max="10000" label="num"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="sumPrice" label="总价"/>
                <el-table-column prop="remark" label="备注"/>
                <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                            <template #reference>
                                <el-button size="mini" type="danger">不想要了</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="goOrder">
            <el-button type="primary" class="order_but" style="margin: 10px 10px 0 0" @click="billPlease">去结账
            </el-button>
        </div>
    </div>
</template>

<script>
import Header from '@/components/Header'
import request from "@/utils/request";
import '@/assets/css/shopCart.css'

export default {
    name: "ShopCart",
    data() {
        return {
            user: {},
            shopCart: [],
            ids: [],
            token: '',
            remark: '我要买这么多',
        }
    },
    components: {
        Header,
    },
    created() {
        //获取用户
        this.getUser();
        //加载购物车
        this.getShopCart();
    },
    methods: {
        updateShopCartNum(row) {
            request.get("/updateNum", {
                params: {
                    id: row.id,
                    num: row.num,
                    price: row.price
                }
            }).then(res => {
                if (res.message === "成功") {
                    console.log("修改数量成功")
                    this.getShopCart();
                }
            })
        },
        getShopCart() {
            request.get("/getShopCart", {
                params: {
                    id: this.user.id
                }
            }).then(res => {
                this.shopCart = res;
                console.log(this.shopCart)
            })
        },
        billPlease() {
            if (this.token === "") {
                this.$message({
                    type: "error",
                    message: "登陆已过期，请重新登录"
                })
                this.$router.push("/");
                return;
            }
            var text = "";
            for (let i = 0; i < this.ids.length; i++) {
                text += this.ids[i] + ","
            }
            console.log(text)
            request.get("/billPlease", {
                params: {
                    idsText: text,
                    remark: this.remark,
                    token: this.token,
                }
            }).then(res => {
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "创建订单成功"
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: "创建订单失败"
                    })
                }
            })
        },
        handleDelete(id) {
            request.get("/delShopCart", {
                params: {
                    id: id
                }
            }).then(res => {
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    })
                    this.getShopCart();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    })
                }
            })
        },
        getUser() {
            if (localStorage.getItem("access-user") != null) {
                this.user = JSON.parse(localStorage.getItem("access-user")).user;
                this.token = JSON.parse(localStorage.getItem("access-user")).token;
            } else {
                this.user = {};
            }
            request.get("/checkToken", {
                headers: {
                    token: this.token
                }
            }).then(res => {
                if (!res) {
                    this.$message({
                        type: "error",
                        message: "身份已过期，请重新登录"
                    })
                    localStorage.removeItem("access-user");
                    this.user = {};
                    this.$router.push("/");
                } else {
                    this.user = JSON.parse(localStorage.getItem("access-user")).user;
                }
            })
        },
    }
}
</script>

<style scoped>

</style>